<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/community/rectangle48.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/tool/top/_20240323222429.png" mode="" class="nav-bar-bg2"></image>
        <view class="userinfo-box">
          <view class="userinfo-left">
            <image :src="avatar" mode="" class="userinfo-left-pic1"></image>
            <text>{{username}}</text>
           <image src="/static/my-userinfo/right1_right-one.png" mode="" class="userinfo-left-pic2"></image>
          </view>
          <view class="userinfo-right" @click="setUserDetail()">
            <image src="/static/my-userinfo/edit_editor.png" mode=""></image>
            <text>编辑资料</text>
          </view>
        </view>
    </view>
    
    <view class="userinfo-feed">
      <view class="userinfo-feed-left">
        <text class="userinfo-feed-left-text1">投喂</text>
        <text class="userinfo-feed-left-text2">给你pick的小猫投喂小鱼干吧</text>
      </view>
      <view class="userinfo-feed-right">
        <image src="/static/my-userinfo/feed/fish_fish (1).png" mode="" class="userinfo-feed-pic1"></image>
        <image src="/static/my-userinfo/feed/ellipse14.png" mode="" class="userinfo-feed-pic2"></image>
        <image src="/static/my-userinfo/feed/path7.png" mode="" class="userinfo-feed-pic3"></image>
      </view>
    </view>
    
    <view class="my-apply">
      <view class="my-apply-top">
        <image src="/static/my-userinfo/apply/rectangle55.png" mode=""></image>
        <text>我的应用</text>
      </view>
      <view class="my-apply-main">
        <view class="my-apply-box">
          <view class="my-apply-box-left">
            <image src="/static/my-userinfo/apply/tip_tips.png" mode="" class="my-apply-pic1"></image>
            <text>我的文章</text>
          </view>
          <image src="/static/my-userinfo/apply/right1_right-one.png" mode="" class="my-apply-pic2"></image>
        </view>
        
        <view class="my-apply-box" @click="gotoMyLike()">
          <view class="my-apply-box-left" >
            <image src="/static/my-userinfo/apply/Oval_heart_oval-love-two.png" mode="" class="my-apply-pic1"></image>
            <text>我的喜欢</text>
          </view>
          <image src="/static/my-userinfo/apply/right1_right-one.png" mode="" class="my-apply-pic2"></image>
        </view>
        
        <view class="my-apply-box">
          <view class="my-apply-box-left">
            <image src="/static/my-userinfo/apply/earphone_headset-one.png" mode="" class="my-apply-pic1"></image>
            <text>联系客服</text>
          </view>
          <image src="/static/my-userinfo/apply/right1_right-one.png" mode="" class="my-apply-pic2"></image>
        </view>
        
        <view class="my-apply-box">
          <view class="my-apply-box-left">
            <image src="/static/my-userinfo/apply/more_more-four.png" mode="" class="my-apply-pic1"></image>
            <text>其他</text>
          </view>
          <image src="/static/my-userinfo/apply/right1_right-one.png" mode="" class="my-apply-pic2"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  
  export default {
    name:"my-userinfo",
    data() {
      return {

      };
    },
    props:{
      username:{
        type: String,
        default: ''
      },
      avatar:{
        type: String,
        default: ''
      }
    },
    
    methods:{
      
      gotoMyLike(){
        
        uni.navigateTo({
          url: '/subpkg/my-like/my-like'
        })
      },
      
      setUserDetail(){
        
        uni.navigateTo({
          url: '/subpkg/setUserDetail/setUserDetail'
        })
      }
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 440rpx;  
    
  .nav-bar-bg1 {
    position: absolute;
    top: 0;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: -35;
    left: -3;
    width: 308rpx;
    height: 300rpx;
  }
  .userinfo-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 165rpx 40rpx;
    .userinfo-left{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userinfo-left-pic1{
        width: 135rpx;
        height: 135rpx;
      }
      text{
        font-size: 21px;
        font-weight: bold;
        margin-left: 35rpx;
      }
      .userinfo-left-pic2{
        width: 40rpx;
        height: 40rpx;
      }
    }
    .userinfo-right{
      width: 170rpx;
      height: 50rpx;
      border-radius: 29rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #707070;
      image{
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
      text{
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
} 

.userinfo-feed{
  width: 695rpx;
  height: 196rpx;
  background-image: url('~@/static/my-userinfo/feed/rectangle3.png');
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -80rpx 25rpx;
  .userinfo-feed-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 50rpx;
    .userinfo-feed-left-text1{
      font-size: 22px;
      font-weight: bold;
      color: #B3834A;
      
    }
    .userinfo-feed-left-text2{
      font-size: 13px;
      color: #B3834A;
    }
  }
  .userinfo-feed-right{
    position: relative;
    .userinfo-feed-pic1{
      position: absolute;
      width: 92rpx;
      height: 92rpx;
      top: -55rpx;
      right: 105rpx;
      z-index: 3;
    }
    .userinfo-feed-pic2{
      position: absolute;
      width: 138rpx;
      height: 84rpx;
      top: -15rpx;
      right: 85rpx;
    }
    .userinfo-feed-pic3{
      position: absolute;
      width: 88rpx;
      height: 68rpx;
      top: 21rpx;
      right: 22rpx;
    }
  }
}

.my-apply{
  margin: 135rpx 40rpx;
  .my-apply-top{
    display: flex;
    justify-content: start;
    align-items: center;
    image{
      width: 8rpx;
      height: 38rpx;
      margin-right: 18rpx;
    }
    text{
      font-size: 15px;
      font-weight: bold;
      color: #3A3A3A;
    }
  }
  .my-apply-main{
    .my-apply-box{
      width: 670rpx;
      height: 118rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      border: 1px solid #FFFFFF;
      border-radius: 25rpx;
      margin-top: 30rpx;
      .my-apply-box-left{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 25rpx;
        .my-apply-pic1{
          width: 54rpx;
          height: 54rpx;
          margin-right: 20rpx;
        }
        text{
          font-size: 15px;
          color: #464646;
        }
      }
      .my-apply-pic2{
        width: 28rpx;
        height: 28rpx;
        padding-right: 45rpx;
      }
    }
    
    .my-apply-box:last-child{
      margin-bottom: 50rpx;
    }
  }
}
</style>